<!--
 * 首页
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <page-root class="page-root" headerMode="" headerScrollMode="" :navOpts="navOpts" title="首页">
        <view class="app-gap-around page-content">
            <view class="title">首页</view>
            <hi-button text="显示全局通知" theme="primary" round block @click="handleShowGlobalNotice"></hi-button>
            <hi-button text="显示全局弹窗" theme="success" round block @click="handleShowGlobalPopup"></hi-button>
            <hi-button text="查看订单" theme="warning" round block @click="handleOrder"></hi-button>
        </view>
    </page-root>
</template>

<script setup>
    import { ref, computed } from "vue";
    import { onLoad, onShow, onReady, onReachBottom, onPullDownRefresh, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";

    const navOpts = ref({
        rightMenu: [{ icon: "__tishi", iconStyle: "color: red" }]
    });

    // 页面滚动，不建议删除，因为 <page-root> 组件中如果需要处理滚动相关的逻辑，就需要在页面中定义，否则 <page-root> 中的 onPageScroll 生命周期不生效
    onPageScroll((e) => {});

    // 显示全局通知
    function handleShowGlobalNotice() {
        uni.$emit("showGlobalNoticeBar");
    }

    // 显示全局弹窗
    function handleShowGlobalPopup() {
        uni.$emit("showGlobalPopup");
    }

    // 查看订单
    function handleOrder() {
        uni.$hiRouter.go("/packages/order/pages/list");
    }
</script>

<style lang="scss" scoped>
    .title {
        font-size: 30rpx;
        font-weight: 700;
        margin-bottom: 50px;
        text-align: center;
        margin-top: 50px;
    }

    .page-content {
        --hi-button-margin: 25px 0;
    }
</style>
